<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建商品</title>
    <link href="../static/css/bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/components.min.css" rel="stylesheet" type="text/css"/>
    <link href="../static/css/login.css" rel="stylesheet" type="text/css"/>
    <script src="../static/js/jquery-1.11.2.min.js" type="text/javascript"></script>
</head>
<body class="login">
    <div class="content">
        <h3 class="form-title">创建商品</h3>
        <div class="form-group">
            <label class="control-label">商品名</label>
            <div>
                <input type="text" class="form-control" placeholder="商品名" name="title" id="title">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">商品描述</label>
            <div>
                <input type="text" class="form-control" placeholder="商品描述" name="description" id="description">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">价格</label>
            <div>
                <input type="text" class="form-control" placeholder="价格" name="price" id="price">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">图片</label>
            <div>
                <input type="text" class="form-control" placeholder="图片" name="imgUrl" id="imgUrl">
            </div>
        </div>
        <div class="form-group">
            <label class="control-label">库存</label>
            <div>
                <input type="text" class="form-control" placeholder="库存" name="stock" id="stock">
            </div>
        </div>
        <div class="form-actions">
            <button id="create" class="btn blue" type="submit">创建</button>
        </div>
    </div>
</body>

<script>
    // DOM加载完毕后再执行
    jQuery(document).ready(function(){
        // 绑定OTP的click点击事件，向后端发送请求
        $("#create").on("click", function() {
            var title = $("#title").val();
            var description = $("#description").val();
            var imgUrl = $("#imgUrl").val();
            var price = $("#price").val();
            var stock = $("#stock").val();

            if (title == null || title == "") {
                alert("商品名不能为空");
                return false;
            }
            if (description == null || description == "") {
                alert("商品描述不能为空");
                return false;
            }
            if (imgUrl == null || imgUrl == "") {
                alert("商品图片不能为空");
                return false;
            }
            if (price == null || price == "") {
                alert("商品价格不能为空");
                return false;
            }
            if (stock == null || stock == "") {
                alert("商品库存不能为空");
                return false;
            }

            $.ajax({
                type: "POST",
                url: "http://localhost:8888/items",
                contentType: "application/x-www-form-urlencoded;charset=utf-8",
                xhrFields: {
                    withCredentials: true
                },
                data: {
                    "title": title,
                    "description": description,
                    "imgUrl": imgUrl,
                    "price": price,
                    "stock": stock
                },
                success: (res)=>{
                    if (res.status == "success") {
                        alert("创建成功");
                    } else {
                        alert("创建失败，原因为：" + res.data.errorMessage);
                    }
                },
                error: (res)=>{
                    alert("创建错误，原因为：" + res.responseText);
                }
            });
            return false;
        })
    });
</script>

</html>